<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <!--    导入vue-->
  <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
  <!--    ajax异步请求-->
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
  <!--  产品名称 模糊查询-->
  <input v-model="product.name" placeholder="产品名称 模糊查询">
  <input type="button" @click="doSearch" value="搜索">
  <br/>
  <div v-for="(product,index) in productList">
    产品id={{ product.id }}&nbsp;产品名称 = {{ product.name }} &nbsp;产品数量 = {{ product.num }}&nbsp; &nbsp;产品类型 = {{ product.type }}&nbsp;产品价格 = {{ product.price }}&nbsp;
    <button @click="del(product.id)">删除</button>
  </div>
  <button v-if="isPreShow" @click="pre">上一页</button>
  <button v-if="isNextShow" @click="next">下一页</button>

</div>
<script>
  //vue数据模型
  const app = {
    data() {
      return {
        urlPrefix: "/springmvc2_war_exploded",//TODO
        product: {
          name: null,//产品名称
        },//搜索条件
        //列表
        productList: [
          {
            id: null, //主键id
            name: null,//产品名称
            num: null,//数量
            price: null,//价格
          }
        ],
        pageNum: 1,//当前页
        pageSize: 3,//页面数据大小
        isPreShow: true,//上一页是否显示
        isNextShow: true,//下一页是否显示
      }
    },
    //事件方法
    methods: {
      //上一页
      pre() {
        this.pageNum = this.pageNum - 1;
        //获取数据
        this.getData();
      },
      //下一页
      next() {
        this.pageNum = this.pageNum + 1;
        //获取数据
        this.getData();
      },
      doSearch() {
        this.pageNum = 1;//点击搜索是默认第一页
        //获取数据
        this.getData();
      },
      getData() {
        if(!this.product.name){//空字符串转换为空对象
          this.product.name = null;
        }
        //从服务器获取数据 GET请求 获取所有订单数据
        axios.get(this.urlPrefix + "/product/getProductList", {
          params: {
            pageNum: this.pageNum,//当前页面
            pageSize: this.pageSize,//分页大小
            name: this.product.name,//产品名称
          }
        })
            .then((response) => {//http响应码为200会进到这里
              //response.data 为result  , result有map属性, pageInfo为map的key
              let result = response.data;
              if (result.code === 200) {
                //分页数据 后端代码 map.put("pageInfo",pageInfo);
                let data = result.map.pageInfo;
                //{"total":15,"list":[{"id":1,"name":"admin","password":"123456"},{"id":2,"name":"张三","password":"123456"},{"id":3,"name":"王五","password":"123456"}],"pageNum":1,"pageSize":3,"size":3,"startRow":1,"endRow":3,"pages":5,"prePage":0,"nextPage":2,"isFirstPage":true,"isLastPage":false,
                // "hasPreviousPage":false,"hasNextPage":true,              "navigatePages":8,"navigatepageNums":[1,2,3,4,5],"navigateFirstPage":1,"navigateLastPage":5}
                this.productList = data.list;
                this.isPreShow = data.hasPreviousPage;//是否有前一页
                this.isNextShow = data.hasNextPage;//是否有后一页
              } else {
                //输出提示消息
                alert(result.msg);
              }
            })
            .catch((error) => { // 请求失败处理 非200响应码
              // alert(JSON.stringify(error));
              alert(error.response.data.msg);
            });
      },
      //删除
      del(id) {
        //调用接口删除数据
        axios.post(this.urlPrefix + "/product/deleteById", {
          id: id
        })
            .then((response) => {//http响应码为200会进到这里
              //response.data 为result  , result有map属性, page为map的key
              let result = response.data;
              if (result.code === 200) {
                //输出提示消息
                alert(result.msg);
                //刷新数据
                this.getData();
              }
            })
            .catch((error) => { // 请求失败处理 非200响应码
              // alert(JSON.stringify(error));
              alert(error.response.data.msg);
            });
      }
    }
  }
  //创建一个vue管理的数据模型  绑定html模板视图
  Vue.createApp(app).mount('#app')
</script>

</body>
</html>